<template>
  <div>
    <el-form ref="form" :disabled="formData.id!=null" :model="formData" label-width="100px" size="mini">
      <el-form-item label="应用">
        <el-select v-model="formData.appName" :disabled="true" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in appList" :key="item.appName"
                     :label="item.appShowName"
                     :value="item.appName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="formData.flowName" :disabled="true" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in flowRuleList" :key="item.name"
                     :label="item.showName"
                     :value="item.name"
          />
        </el-select>
      </el-form-item>
      <DeployApplyFormItem :appName="formData.appName" :applyFormData="formData.applyFormData"
                           :editable="formData.id==null"/>
      <el-form-item label="申请说明">
        <el-input v-model="formData.remark" maxlength="200" rows="8" show-word-limit type="textarea"/>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import DeployApplyFormItem from "./DeployApplyFormItem";
import {flowRuleListApi} from "@/api/apply";
import {appListApi} from "@/api/manage";

export default {
  props: {
    formData: {appName: null, flowName: null, applyFormData: {}},
  },
  data() {
    return {
      flowRuleList: [],
      appList: [],
    };
  },
  components: {DeployApplyFormItem},
  methods: {},
  async created() {
    this.flowRuleList = await flowRuleListApi();
    this.appList = await appListApi();
    console.log(this.formData);
  }
};
</script>
<style scoped>

</style>
